{% from "select.njk" import select %}

<section id="select"  class="w-full rounded-lg border scroll-mt-14">
  <header class="border-b px-4 py-3 flex items-center justify-between">
    <h2 class="text-sm font-medium">Select</h2>
    <a href="/components/select" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
      {% lucide "book-open", { "class": "size-4" }   %}
    </a>
  </header>
  <div class="p-4 gap">
    <div class="flex flex-col gap-4">
      <div class="flex flex-wrap items-center gap-2 md:flex-row">
        <select class="select w-[180px]">
          <optgroup label="Fruits">
            <option>Apple</option>
            <option>Banana</option>
            <option>Blueberry</option>
          </optgroup>
          <optgroup label="Grapes">
            <option>Pineapple</option>
          </optgroup>
        </select>
        <select class="select w-[180px]" disabled>
          <option>Disabled</option>
        </select>
      </div>

      <div class="flex flex-wrap items-center gap-4">
        <div class="flex flex-wrap items-center gap-2 md:flex-row">
          {{ select(
            id="select-default",
            trigger_attrs={"class": "w-[180px]"},
            selected="blueberry",
            items=[
              {
                type: "group",
                label: "Fruits",
                items: [
                  { type: "item", label: "Apple", value: "apple" },
                  { type: "item", label: "Banana", value: "banana" },
                  { type: "item", label: "Blueberry", value: "blueberry" }
                ]
              },
              {
                type: "group",
                label: "Grapes",
                items: [
                  { type: "item", label: "Pineapple", value: "pineapple" }
                ]
              }
            ]
          ) }}
          {% call select(
            id="select-scrollbar",
            trigger_attrs={"class": "w-[180px]"},
            listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"}
          ) %}
            {% for i in range(0, 99) %}
              <div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
            {% endfor %}
          {% endcall %}

          {% call select(
            id="select-disabled",
            trigger_attrs={"disabled": "disabled", "class": "w-[180px]"}
          ) %}
          <div role="option" data-value="disabled">Disabled</div>
          {% endcall %}


          {% call select(
            id="select-with-icon",
            name="chart-type",
            trigger_attrs={'class': 'w-[180px]'}
          ) %}
            <div type="button" role="option" data-value="bar">
              <span class="flex items-center gap-2">
                {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
                Bar
              </span>
            </div>
            <div type="button" role="option" data-value="line">
              <span class="flex items-center gap-2">
                {% lucide "chart-line", {"class": "text-muted-foreground"} %}
                Line
              </span>
            </div>
            <div type="button" role="option" data-value="pie">
              <span class="flex items-center gap-2">
                {% lucide "chart-pie", {"class": "text-muted-foreground"} %}
                Pie
              </span>
            </div>
          {% endcall %}
        </div>
      </div>
    </div>
  </div>
</section>